.MapCard_container {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;

  .MapCard {
    width: 100%;
    background-image: url(/src/assets/maphomeimages/background.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: auto;
    z-index: 99;

    &-title {
      height: 39 * $fontsizeUnit;
      line-height: 39 * $fontsizeUnit;
      padding-left: 40px;
      padding-right: 13 * $fontsizeUnit;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &--text {
        font-size: 20px;
        color: #fff;
      }
      &--extra {
        height: 24 * $fontsizeUnit;
        line-height: 24 * $fontsizeUnit;
        margin-top: 10 * $fontsizeUnit;
        border-radius: 3px;
        overflow: hidden;
      }
    }
    &-body {
      padding: 16 * $fontsizeUnit 13 * $fontsizeUnit;
      height: calc(100% - 39 * $fontsizeUnit);
      display: flex;
      flex-direction: column;
    }
  }
}
.MapCard-bg_left {
  background: url(../../../../../assets/maphomeimages/background1.png) no-repeat;
}
.MapCard-bg_right {
  background: url(../../../../../assets/maphomeimages/background2.png) no-repeat;
}
